<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>运动会成绩查询</title>
  <style>
    /* 基础样式，直接写在HTML中 */
    * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", sans-serif; }
    body { background-color: #f5f7fa; color: #333; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
    header { background-color: #165DFF; color: white; padding: 15px 0; }
    .header-content { display: flex; justify-content: space-between; align-items: center; }
    .logo { font-size: 1.5rem; font-weight: bold; }
    .nav-btn { display: none; } /* 移动端菜单按钮，暂时隐藏 */
    .main-menu { display: flex; gap: 20px; }
    .main-menu a { color: white; text-decoration: none; }
    .hero { padding: 40px 0; text-align: center; }
    .hero h1 { font-size: 2.5rem; margin-bottom: 10px; }
    .hero p { font-size: 1.1rem; color: #666; max-width: 800px; margin: 0 auto; }
    .card { background-color: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 20px; margin-bottom: 20px; }
    .match-list { display: grid; grid-template-columns: 1fr; gap: 20px; }
    .match-card { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
    .match-card img { width: 100%; height: 200px; object-fit: cover; }
    .match-info { padding: 15px; }
    .match-info h3 { font-size: 1.3rem; margin-bottom: 10px; }
    .match-status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.8rem; margin-right: 10px; }
    .status-progress { background-color: #fff3cd; color: #856404; }
    .status-upcoming { background-color: #d1ecf1; color: #0c5460; }
    .result-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    .result-table th, .result-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e5e7eb; }
    .result-table th { background-color: #f8f9fa; font-weight: 600; }
    .result-table tr:hover { background-color: #f9fafb; }
    .rank-1 { background-color: #fff3cd; }
    .footer { text-align: center; padding: 30px 0; color: #666; margin-top: 40px; }
    
    /* 响应式设计：手机端样式 */
    @media (max-width: 768px) {
      .main-menu { display: none; }
      .nav-btn { display: block; font-size: 1.5rem; }
      .hero h1 { font-size: 2rem; }
      .match-card img { height: 150px; }
    }
  </style>
</head>
<body>
  <header>
    <div class="container header-content">
      <div class="logo">运动会成绩查询</div>
      <button class="nav-btn">☰</button>
      <ul class="main-menu">
        <li><a href="#matches">赛事列表</a></li>
        <li><a href="#results">成绩查询</a></li>
        <li><a href="#ranking">班级排名</a></li>
      </ul>
    </div>
  </header>
  
  <div class="container">
    <div class="hero">
      <h1>2025年春季运动会成绩查询平台</h1>
      <p>实时查看各赛事成绩，支持按项目、班级查询，让成绩公开透明</p>
    </div>
    
    <section id="matches" class="mt-8">
      <h2 style="font-size: 1.8rem; margin-bottom: 20px;">当前赛事</h2>
      <div class="match-list">
        <!-- 赛事卡片1 -->
        <div class="match-card">
          <img src="https://picsum.photos/id/1062/800/400" alt="田径运动会">
          <div class="match-info">
            <div>
              <span class="match-status status-progress">进行中</span>
              <span>2025-05-20至05-25</span>
            </div>
            <h3>2025年春季田径运动会</h3>
            <p>包含100米、800米、跳高、跳远等多个项目，让成绩更加公开透明</p>
            <a href="#result-1" style="display: inline-block; margin-top: 15px; padding: 8px 15px; background-color: #165DFF; color: white; text-decoration: none; border-radius: 4px;">查看成绩</a>
          </div>
        </div>
        
        <!-- 赛事卡片2 -->
        <div class="match-card">
          <img src="https://picsum.photos/id/1071/800/400" alt="球类运动会">
          <div class="match-info">
            <div>
              <span class="match-status status-upcoming">即将开始</span>
              <span>2025-06-01至06-05</span>
            </div>
            <h3>夏季球类运动会</h3>
            <p>篮球、足球、排球等团体项目，以班级为单位参赛</p>
            <a href="#" style="display: inline-block; margin-top: 15px; padding: 8px 15px; background-color: #ddd; color: #666; text-decoration: none; border-radius: 4px; cursor: not-allowed;">成绩待发布</a>
          </div>
        </div>
      </div>
    </section>
    
    <section id="results" class="mt-8">
      <h2 style="font-size: 1.8rem; margin-bottom: 20px;">最新成绩</h2>
      <div class="card">
        <h3 style="font-size: 1.3rem; margin-bottom: 15px;">女子800米决赛 - 2025年春季田径运动会</h3>
        <table class="result-table">
          <thead>
            <tr>
              <th>名次</th>
              <th>运动员</th>
              <th>班级</th>
              <th>成绩</th>
            </tr>
          </thead>
          <tbody>
            <tr class="rank-1">
              <td>1</td>
              <td>张梦然</td>
              <td>高三(2)班</td>
              <td>2:18.56</td>
            </tr>
            <tr>
              <td>2</td>
              <td>李雨晴</td>
              <td>高二(5)班</td>
              <td>2:20.12</td>
            </tr>
            <tr>
              <td>3</td>
              <td>王雪</td>
              <td>高一(3)班</td>
              <td>2:22.35</td>
            </tr>
            <tr>
              <td>4</td>
              <td>陈思思</td>
              <td>高三(1)班</td>
              <td>2:23.01</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </div>
  
  <footer class="footer">
    <p>© 2025 运动会成绩查询平台 | 仅供学习使用</p>
  </footer>
</body>
<script>
  // 移动端菜单切换
  const navBtn = document.querySelector('.nav-btn');
  const mainMenu = document.querySelector('.main-menu');
  
  navBtn.addEventListener('click', function() {
    mainMenu.style.display = mainMenu.style.display === 'flex' ? 'none' : 'flex';
  });
  
  // 表格排序功能（点击表头排序）
  const headers = document.querySelectorAll('.result-table th');
  headers.forEach(header => {
    header.addEventListener('click', function() {
      const table = this.closest('table');
      const rows = table.querySelectorAll('tbody tr');
      const columnIndex = Array.from(headers).indexOf(this);
      const isNumberColumn = columnIndex === 0 || columnIndex === 3; // 名次和成绩列是数字
      
      // 排序行
      rows.sort((a, b) => {
        const aValue = isNumberColumn ? parseFloat(a.querySelector('td').textContent) : a.querySelector('td').textContent;
        const bValue = isNumberColumn ? parseFloat(b.querySelector('td').textContent) : b.querySelector('td').textContent;
        return aValue - bValue;
      });
      
      // 重新插入行
      const tbody = table.querySelector('tbody');
      tbody.innerHTML = '';
      rows.forEach(row => tbody.appendChild(row));
    });
  });
</script>
</html>
